// 导入图片
import defaltImg from '@/assets/images/200.png'
import lodImg from '@/assets/images/loading.gif'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app) {
    // 需要拿到main.js中由createApp方法产出的app实例对象
    // console.log(app)
    app.directive('imgLazy', {
      // el:img dom对象
      // binding.value  图片url地址
      mounted (el, binding) {
        // console.log(el, binding)
        const { stop } = useIntersectionObserver(
          // 参数一:被监控的元素或组件
          el,
          // 参数二:进入可视区域的回调
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              el.src = lodImg
              // 延时器看效果
              // setTimeout(() => {
              //   el.src = binding.value
              // }, 2000)
              // 进入可视区域时渲染图片
              el.src = binding.value
              // 图片加载错误时渲染的图片
              el.onerror = () => {
                el.src = defaltImg
              }
              // 注意：渲染后，立即关闭监听=》避免多次发送
              stop()
            }
          },
          // 参数三:进入当前元素多少开始执行回调
          // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          { threshold: 0 }
        )
      }
    })
  }
}
